<template>
  <div class="sale">
    <Search
      str1="在售价最低"
      str2="月销量最高"
      str3="请输入商品ID或名称"
      @myEvent="query"
      ref="test"
    ></Search>

    <div class="clothes">
      <Clothes
        v-for="item in useStore.goodsSelect"
        :src="item.productimg"
        :key="item.id"
        :price="item.price"
        :earnings="item.estimatedincome"
        :monthlysales="item.monthlysales"
        :stock="item.stock"
        :productname="item.productname"
        :ishow="flag ? true : false"
        @mouseenter="mouseEnter"
        @mouseleave="mouseLeave"
        :id="item.id"
      ></Clothes>
    </div>

    <div>
      <Footer
        ref="refFooter"
        str1="今日入库"
        str2="所有商品"
        btnStr="一键入库"
        :total="total"
        :pageSizes="pageSize"
        @myEvent2="pageNext"
        @myEvent3="pagePrev"
        @toExcel="inStorage"
      ></Footer>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import Search from "@/components/Search.vue";
import Footer from "@/components/Footer.vue";
import Clothes from "@/components/Clothes.vue";
import { getSelectList, getGoodsInStorage } from "@/api/goodsData.js";
import { useStoreSum } from "@/stores/sum.js";
import { sortBy } from "@/utils/sortArr.js";

const useStore = useStoreSum();



onMounted(() => {
  getSelectData();
});

const refFooter = ref("");

const total = ref(1);
const pageSize = ref(1);

//获取选品入库接口
async function getSelectData(page) {
  const res = await getSelectList(page);
  useStore.goodsSelect = res.data.items;
  total.value = res.data.count;
  pageSize.value = res.data.ls;
}


const flag = ref(false);

function mouseEnter() {
  flag.value = true;
}

function mouseLeave() {
  flag.value = false;
}

function myEvent() {}

//下一页
function pageNext() {
  getSelectData(refFooter.value.pageNum);
}

// 上一页
function pagePrev() {
  getSelectData(refFooter.value.pageNum);
}

//一键入库
function inStorage() {
  console.log(useStore.inStorageId);
  getGoodsInStorage(useStore.inStorageId)
    .then((res) => {
      console.log(res);
    })
    .catch((err) => {
      console.log(err);
    });
}

//查询函数
async function query() {
  //获取输入的商品id
  let goodsId = document.querySelector("#goodsId").value;
  //获取最低金额
  let lowCount = document.querySelector("#lowCount").value;
  //获取最高金额
  let heightCount = document.querySelector("#heightCount").value;

  //获取一级分类和二级分类

  // console.log(useStore.goodsSelect)
  // console.log(Number(goodsId));
  // console.log(lowCount);
  // console.log(heightCount);
  if (goodsId !== "") {
    console.log(Number(goodsId));
    const newArr = useStore.goodsSelect.filter((item) => {
      return item.id === Number(goodsId);
    });
    useStore.goodsSelect = newArr;
    console.log(useStore.goodsSelect);
  }

  if(lowCount !== "" && heightCount !== ""){
    const newArr = useStore.goodsSelect.filter((item) => {
      return item.price <=  Number(heightCount) &&  item.price >=  Number(lowCount);
    });
    useStore.goodsSelect = newArr;
    console.log(useStore.goodsSelect);
  }

  if(lowCount === "" && heightCount === "" && goodsId === ""){
    getSelectData();
  }
}
</script>

<style lang="less" scoped>
.sale {
  .clothes {
    box-shadow: 0px 10px 20px rgb(0 0 0 / 20%);
    display: flex;
    flex-wrap: wrap;
    margin-top: 30px;
    padding-bottom: 20px;
  }
}
</style>
